import React from "react";
import ListItem from './ListItem'

class List extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'react',
    }
  }

  render() {
    const { list } = this.props
    return (
      <div>
        <p>{this.state.name}</p>
        <ul>
          {
            list.map((item, index) => {
              return (
                <ListItem key={index} item={item} deleteItem={this.handleDelete} toggleCompleted={this.toggleCompleted}></ListItem>
              )
            })
          }
        </ul>
        <button>添加一项</button>
      </div>
    )
  }

  toggleCompleted = (id) => {
    this.props.toggleCompleted(id)
  }

  handleDelete = (id) => {
    this.props.handleDelete(id)
  }
}

export default List